<template>
  <div class="right-menu" ref="rightMenu" @scroll="handleScroll">
    <ul>
      <li v-for="child in selectedChildren" :key="child.id">
        <ul>
          <li
            v-for="grandchild in child.children"
            :key="grandchild.id"
            @click="selectGrandchild(grandchild)"
          >
            {{ grandchild.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    selectedChildren: Array,
    selectedGrandchild: Object,
    setSelectedGrandchild: Function,
  },
  methods: {
    selectGrandchild(grandchild) {
      this.setSelectedGrandchild(grandchild);
    },
    handleScroll() {
      // Handle scroll if needed
    },
  },
};
</script>

<style scoped>
.right-menu {
  height: 100%;
  overflow-y: auto;
}
</style>
